<template>
  <div class="login-page-container">
    <!-- 苹果风格背景 -->
    <div class="apple-background">
      <div class="background-gradient"></div>
      <div class="background-blur"></div>
      
      <!-- 动态背景元素 -->
      <div class="background-elements">
        <div class="bg-grid"></div>
        <div class="bg-glow"></div>
        <div class="bg-circle bg-circle-1"></div>
        <div class="bg-circle bg-circle-2"></div>
        <div class="bg-circle bg-circle-3"></div>
        <div class="bg-circle bg-circle-4"></div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- Logo和标题区域 -->
      <div class="hero-section">
        <div class="logo-circle">
          <div class="logo-inner">
            <el-icon size="40"><User /></el-icon>
          </div>
        </div>
        <h1 class="app-title">学习平台</h1>
        <p class="app-subtitle">开启您的学习之旅</p>
      </div>
      
      <!-- 操作按钮区域 -->
      <div class="action-buttons">
        <el-button 
          type="primary" 
          @click="showLoginModal = true" 
          size="large" 
          class="primary-action-button"
        >
          登录
        </el-button>
        <el-button 
          type="default" 
          @click="showRegisterModal = true" 
          size="large" 
          class="secondary-action-button"
        >
          注册
        </el-button>
      </div>
      
      <!-- 其他链接 -->
      <div class="additional-links">
        <el-button type="text" @click="showForgotPasswordModal = true" class="text-link">
          忘记密码
        </el-button>
      </div>
    </div>
    
    <!-- 登录模态框 -->
    <LoginModal 
      v-model="showLoginModal" 
      @switch-to-register="handleSwitchToRegister"
      @switch-to-forgot-password="handleSwitchToForgotPassword"
      @close="handleLoginModalClose"
    />
    
    <!-- 注册模态框 -->
    <RegisterModal 
      v-model="showRegisterModal" 
      @switch-to-login="handleSwitchToLogin"
      @close="handleRegisterModalClose"
    />
    
    <!-- 忘记密码模态框 -->
    <ForgotPasswordModal 
      v-model="showForgotPasswordModal"
      @switch-to-login="handleForgotPasswordToLogin"
      @switch-to-register="handleForgotPasswordToRegister"
      @close="handleForgotPasswordModalClose"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { User } from '@element-plus/icons-vue';
import LoginModal from '@/components/AuthModals/LoginModal.vue';
import RegisterModal from '@/components/AuthModals/RegisterModal.vue';
import ForgotPasswordModal from '@/components/AuthModals/ForgotPasswordModal.vue';

const router = useRouter();

// 模态框显示状态
const showLoginModal = ref(true); // 默认显示登录模态框
const showRegisterModal = ref(false);
const showForgotPasswordModal = ref(false);

// 响应式检测移动端
const windowWidth = ref(window.innerWidth);
const isMobile = computed(() => windowWidth.value <= 768);

// 监听窗口大小变化
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

// 处理模态框切换
const handleSwitchToRegister = () => {
  showLoginModal.value = false;
  setTimeout(() => {
    showRegisterModal.value = true;
  }, 300);
};

const handleSwitchToLogin = () => {
  showRegisterModal.value = false;
  setTimeout(() => {
    showLoginModal.value = true;
  }, 300);
};

const handleSwitchToForgotPassword = () => {
  showLoginModal.value = false;
  setTimeout(() => {
    showForgotPasswordModal.value = true;
  }, 300);
};

const handleForgotPasswordToLogin = () => {
  showForgotPasswordModal.value = false;
  setTimeout(() => {
    showLoginModal.value = true;
  }, 300);
};

const handleForgotPasswordToRegister = () => {
  showForgotPasswordModal.value = false;
  setTimeout(() => {
    showRegisterModal.value = true;
  }, 300);
};

// 处理模态框关闭
const handleLoginModalClose = () => {
  // 登录模态框关闭后的处理逻辑
};

const handleRegisterModalClose = () => {
  // 注册模态框关闭后的处理逻辑
};

const handleForgotPasswordModalClose = () => {
  // 忘记密码模态框关闭后的处理逻辑
};
</script>

<style scoped>
.login-page-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 苹果风格背景 */
.apple-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.background-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  opacity: 0.9;
}

.background-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.1);
}

/* 动态背景元素 */
.background-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 1;
}

.bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  z-index: 1;
  animation: pulse 8s infinite alternate;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.bg-circle-1 {
  top: 10%;
  left: 15%;
  width: 80px;
  height: 80px;
  animation: float 15s infinite ease-in-out;
}

.bg-circle-2 {
  top: 70%;
  left: 80%;
  width: 120px;
  height: 120px;
  animation: float 18s infinite ease-in-out reverse;
}

.bg-circle-3 {
  top: 20%;
  left: 85%;
  width: 60px;
  height: 60px;
  animation: float 12s infinite ease-in-out;
}

.bg-circle-4 {
  top: 80%;
  left: 10%;
  width: 100px;
  height: 100px;
  animation: float 20s infinite ease-in-out reverse;
}

/* 主要内容区域 */
.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  z-index: 10;
  max-width: 500px;
  width: 100%;
}

/* Logo和标题区域 */
.hero-section {
  margin-bottom: 40px;
}

.logo-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.logo-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.logo-inner {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.app-title {
  font-size: 42px;
  font-weight: 700;
  color: white;
  margin: 0 0 12px 0;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.app-subtitle {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

/* 操作按钮区域 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 320px;
  margin-bottom: 24px;
}

.primary-action-button {
  width: 100%;
  height: 56px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  font-size: 18px;
  font-weight: 600;
  color: #667eea;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

:deep(.primary-action-button:hover) {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  background: white;
}

:deep(.primary-action-button:active) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.secondary-action-button {
  width: 100%;
  height: 56px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 18px;
  font-weight: 600;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

:deep(.secondary-action-button:hover) {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.3);
}

:deep(.secondary-action-button:active) {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 其他链接 */
.additional-links {
  display: flex;
  justify-content: center;
}

.text-link {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  padding: 0;
  transition: all 0.2s ease;
}

:deep(.text-link:hover) {
  color: white;
  transform: translateY(-1px);
}

/* 动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
  }
  66% {
    transform: translateY(20px) rotate(240deg);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(0.95);
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }
  
  .logo-circle {
    width: 80px;
    height: 80px;
  }
  
  .logo-inner {
    width: 72px;
    height: 72px;
  }
  
  .app-title {
    font-size: 32px;
  }
  
  .app-subtitle {
    font-size: 18px;
  }
  
  .action-buttons {
    max-width: 280px;
  }
  
  .primary-action-button,
  .secondary-action-button {
    height: 50px;
    font-size: 16px;
  }
}
</style>